<template>
  <PageListContainer>
    <div class="base-block">
      <el-tabs v-model="tabs.active" @tab-change="onTabsChange">
        <el-tab-pane v-for="o in tabs.list" :key="o.value" :label="o.label" :name="o.value"></el-tab-pane>
      </el-tabs>
      <k-search v-if="tabs.active == 2" :model="params" @search="onSearch" @reset="onReset">
        <el-form-item label="商品状态" prop="status">
          <el-select v-model="params.status" placeholder="不限">
            <el-option v-for="item in skuStatusOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
      </k-search>
    </div>
    <Banner v-if="tabs.active == 1" />
    <RecommendProduct v-else ref="RecommendProductRef" />
  </PageListContainer>
</template>

<script setup lang="ts">
import { defineComponent, reactive, ref } from 'vue';
import { skuStatusOptions } from './hooks/use-table';
import Banner from './components/banner.vue';
import RecommendProduct from './components/recommend-product.vue';
defineComponent({ name: 'ActivityWeb' });

const tabs = reactive({
  active: 1,
  list: [
    { label: '掘金Banner', value: 1 },
    { label: '推荐位商品', value: 2 }
  ]
});
const onTabsChange = () => {
  params.status = '';
};

const params = reactive({
  status: ''
});
const RecommendProductRef = ref();
// 搜索
const onSearch = () => {
  RecommendProductRef.value.onFilter(params);
};
// 重置
const onReset = () => {
  params.status = '';
};
</script>
